<template>
  <view class="page">
    <view class="content">
      <view class="title">首次使用，请完善您的信息</view>
      <view class="form-container">
        <view class="form-item">
          <view class="label">您的考试：</view>
          <view class="radio-group">
            <view
              class="radio-item"
              v-for="item in examList"
              :class="{ active: inputForm.examId === item.examId }"
              @click="
                inputForm.examId = item.examId
                inputForm.examName = item.examName
              "
              :key="item.examId"
              >{{ item.examName }}</view
            >
          </view>
        </view>
        <view class="form-item">
          <view class="label">目标分数：</view>
          <view class="input-container">
            <input type="text" placeholder="请输入考试的目标分数" v-model="inputForm.targetScore" />
          </view>
        </view>
        <view class="form-item">
          <view class="label">现在年级：</view>
          <view class="radio-group">
            <view
              class="radio-item"
              v-for="item in gradeList"
              :key="item"
              :class="{ active: inputForm.currentGrade === item }"
              @click="inputForm.currentGrade = item"
              >{{ item }}</view
            >
          </view>
        </view>
        <!--		只有选择了考研考试时才展示-->
        <template v-if="inputForm.examName && inputForm.examName.includes('考研')">
          <view class="form-item">
            <view class="label">考研状态：</view>
            <view class="radio-group">
              <view
                class="radio-item"
                v-for="item in currentStatusList"
                :key="item"
                :class="{ active: inputForm.currentStatus === item }"
                @click="inputForm.currentStatus = item"
                >{{ item }}</view
              >
            </view>
          </view>
          <view class="form-item">
            <view class="label">目标院校：</view>
            <view class="input-container">
              <input type="text" placeholder="请输入考研目标院校" v-model="inputForm.targetCollege" />
            </view>
          </view>
        </template>
        <view class="form-item">
          <view class="label">考试时间：</view>
          <view class="input-container">
            <picker mode="date" :start="currentDateString" @change="(e) => (inputForm.examTime = e.detail.value)">
              <view style="width: calc(80vw - 170rpx); height: 45rpx">
                <text v-if="inputForm.examTime">{{ inputForm.examTime }}</text>
                <text v-else style="color: var(--text-color-light)">请选择考试时间</text>
              </view>
            </picker>
          </view>
        </view>
        <view class="form-item">
          <view class="label">备考次数：</view>
          <view class="input-container">
            <input type="text" placeholder="例如一战/二战/三战" v-model="inputForm.preparationNumber" />
          </view>
        </view>
        <view class="form-item">
          <view class="label">大学院校：</view>
          <view class="input-container">
            <input type="text" placeholder="请输入您所就读/毕业的大学院校" v-model="inputForm.universityCollege" />
          </view>
        </view>
        <view class="form-item">
          <view class="label">大学专业：</view>
          <view class="input-container">
            <input type="text" placeholder="请输入" v-model="inputForm.undergraduateMajor" />
          </view>
        </view>
      </view>
      <view
        class="submit-btn"
        @click="
          () => {
            submit().finally(() => {
              goToIndex()
            })
          }
        "
        >我填好了</view
      >
      <view
        class="skip-btn"
        @click="
          () => {
            submit().finally(() => {
              goToIndex()
            })
          }
        "
        >{{ "跳过 >" }}</view
      >
    </view>
  </view>
</template>

<script>
import request from "@/utils/request"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import dateUtils from "@/utils/dateUtils"
export default {
  data() {
    return {
      examList: [],
      inputForm: {
        examId: "", //考试id
        examName: "", //考试名称
        targetScore: "", //目标分数
        currentGrade: "", //现在年级
        targetCollege: "", //目标院校
        currentStatus: "", //考研状态
        examTime: "", //考试时间
        preparationNumber: "", //备考次数
        universityCollege: "", //大学院校
        undergraduateMajor: "", //大学专业
      },
      gradeList: ["大一", "大二", "大三", "大四", "其他"],
      currentStatusList: ["在职考研", "在读考研", "全职备考"],
      currentDateString: "",
    }
  },
  onLoad() {
    this.currentDateString = dateUtils.formatDate(new Date(), "yyyy-MM-dd")
    //获取考试列表
    request({
      url: "exam/getAllExam",
      showLoading: true,
      errorHandle: true,
    }).then(async (data) => {
      this.examList = data
    })
  },
  provide() {
    return {
      parent: this,
    }
  },
  methods: {
    submit() {
      return new Promise((resolve, reject) => {
        request({
          url: "userinfo/addPersonalInfo",
          showLoading: true,
          data: this.inputForm,
        }).then(() => {
          //刷新用户信息
          store.dispatch(userActionType.action.refreshUserInfo).finally(() => {
            resolve()
          })
        })
      })
    },
    //去到首页
    goToIndex() {
      uni.reLaunch({
        url: "/pages/index/index",
      })
    },
  },
}
</script>

<style lang="scss">
.page {
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  .content {
    display: flex;
    align-items: center;
    width: 100vw;
    flex-direction: column;
    .title {
      font-size: 40rpx;
      padding: {
        top: 40rpx;
        bottom: 20rpx;
      }
    }
    .form-container {
      width: 90vw;
      .form-item {
        margin-top: 30rpx;
        display: flex;
        .label {
          font-size: 32rpx;
          min-width: 170rpx;
          padding-top: 10rpx;
        }
        .radio-group {
          display: flex;
          flex-wrap: wrap;
          .radio-item {
            margin-bottom: 20rpx;
            margin-right: 20rpx;
            background: var(--gray-background-color);
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 30rpx;
            font-size: 28rpx;
            padding: 0 20rpx;
            &.active {
              background: var(--theme-color);
            }
          }
        }
        .input-container {
          background: var(--gray-background-color);
          padding: 10rpx;
          width: 0;
          flex: 1;
          input {
            width: 100%;
          }
        }
      }
    }
    .submit-btn {
      margin-top: 80rpx;
      background: var(--theme-color);
      width: 60vw;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
    }
    .skip-btn {
      margin-top: 50rpx;
      font-size: 28rpx;
      color: var(--text-color-light);
      width: 80vw;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
